import React from 'react';
import { Form, Button, Modal, Tabs, message} from 'antd';
import EditForex from './EditForex'
import ClaimList from './ClaimList'
import SplitForex from './SplitForex'
import Claim from './Claim'
import RelateForex from './RelateForex'

import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';


export default Form.create({wrappedComponentRef: true})(class ClaimDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            loading: false
        }
    }

    handleCancel = () => {
        if(this.editForex)this.editForex.handleCancel();
        //if(this.exchange)this.exchange.handleCancel();
        if(this.claim)this.claim.handleCancel();
        if(this.relateForex)this.relateForex.handleResetFields();
        if(this.splitForex)this.splitForex.handleCancel();

        this.setState({open:false, loading: false});
        this.props.dispatch({
            type: 'claim/setlist',
            payload: {
                list: "",
            }
        });

        this.props.dispatch({
            type: 'foreignExchangeManage/setDataSource',
            payload: {
                data: "",
            }
        });


    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})
    }

    handleClose=()=>{
        this.setState({open:false, loading: false});
    }

    handleConfirm = () => {
        if(this.state.type == OperatorConstant.view){
            return;
        }

        this.props.form.validateFields((errors, values) => {
            if (errors) return;

            if (this.state.type == OperatorConstant.forex_claim) {
                this.claim.handleConfirm({resetLoading : (loading) => {
                    this.setState({ loading});
                }});

            }

            else if(this.state.type == OperatorConstant.forex_submit){
                this.setState({ loading: true});
                this.props.dispatch({
                    type: 'claim/submitClaimForex',
                    payload: {
                        forexId: this.props.dataSource.id,
                        onSuccess:()=>{
                            this.props.handleSearch();
                            this.handleCancel();
                        },
                        onFail: ()=>{
                            this.setState({loading: false});
                        }
                    }
                });

            }else if(this.state.type==OperatorConstant.forex_split)
            {      
                this.splitForex.handleSplit({resetLoading : (loading) => {
                    this.setState({ loading});
                }});
            }

        })
    };




    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let footer = [];

        footer.push(<Button key="cancel" size="large"  onClick={this.handleCancel.bind(this)}>取消</Button>);

        if (this.state.type != OperatorConstant.view && this.state.type != OperatorConstant.forex_relate ) {
            if(OperatorConstant.forex_split==this.state.type){
                footer.push(<Button key="apply" size="large" loading={this.state.loading} onClick={this.handleConfirm.bind(this)}>拆分</Button>)
            }else {
                footer.push(<Button key="apply" size="large" loading={this.state.loading} onClick={this.handleConfirm.bind(this)}>确认</Button>);
            }
        }

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"外汇"} width={1000} wrapClassName="vertical-center-modal"
                   onCancel={this.handleCancel.bind(this)} footer ={footer}>

                <EditForex wrappedComponentRef={(inst) => this.editForex = inst} dispatch={this.props.dispatch}
                           dataSource={this.props.dataSource} type={OperatorConstant.view} handleCancel={this.handleCancel}/>

                {/*{OperatorConstant.view == this.state.type || OperatorConstant.forex_submit == this.state.type ?*/}
                    {/*<ClaimList wrappedComponentRef={(inst) => this.claimList = inst} dispatch={this.props.dispatch}*/}
                               {/*claim = {this.props.claim}*/}
                               {/*type={this.state.type}*/}
                               {/*forexId={this.props.dataSource.id}*/}
                               {/*dataSource={this.props.dataSource}  handleCancel={this.handleCancel}/>*/}
                    {/*:""*/}
                {/*}*/}


                {OperatorConstant.forex_claim == this.state.type ?
                    <Claim wrappedComponentRef={(inst) => this.claim = inst} dispatch={this.props.dispatch}
                               claim = {this.props.claim}
                               dataSource={this.props.dataSource}  handleCancel={this.handleCancel}
                               handleSearch = {this.props.handleSearch}/>
                    :""
                }


                {OperatorConstant.forex_relate == this.state.type ?
                    <RelateForex wrappedComponentRef={(inst) => this.relateForex = inst} dispatch={this.props.dispatch}
                               claim = {this.props.claim}
                               type={this.state.type}
                               forexId={this.props.dataSource.id}
                               dataSource={this.props.dataSource}  handleCancel={this.handleCancel}/>
                    : ""
                }
                {
                    OperatorConstant.forex_split==this.state.type?

                           <SplitForex wrappedComponentRef={(inst)=>this.splitForex=inst}
                                    forexId={this.props.dataSource.id}
                                    dataSource={this.props.dataSource}
                                    dispatch={this.props.dispatch}
                                    handleClose={this.handleClose}
                                    formItemLayout={formItemLayout}
                        />
                        :""
                }

            </Modal>
        );
    }
})


